﻿<%@ Page Language="C#" AutoEventWireup="true" MasterPageFile="~/Wap/Shop/ShopSite.Master"
    CodeBehind="CommentDetail.aspx.cs" Inherits="ZLCMS.Web.Wap.Shop.CommentDetail" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
    <title>商品评价</title>
    <link rel="stylesheet" href="/wap/lib/validator-0.7.0/css/jquery.validator.css" />
    <script type="text/javascript" src="/wap/lib/validator-0.7.0/jquery.validator.js"></script>
    <script type="text/javascript" src="/wap/lib/validator-0.7.0/local/zh_CN.js"></script>
    <style type="text/css">
        #star li
        {
            width: 10%;
        }
        .ui-input-text
        {
            box-shadow: none;
        }
      .comment .comment_shou{font-size:12px; color:#999;font-weight:normal; display:none;margin: 5px 0;}
      .comment .comment_shou a{font-size:12px; font-weight:normal;}
    </style>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="pages" runat="server">
    <div data-role="page" id="mypage">
        <div data-role="header">
        </div>
        <!-- /header -->
        <div role="main" class="ui-content">
            <div class="refundTop">
                <a href="javascript:void(0)" onclick="history.back()" data-ajax="false"><img src="images/arrowLeftCom.png" /></a>
                商品评价
            </div>
    
            <div class="pingjia_box1">
                <div class="product">
                <a href="#">
                <div class="left" prop="Data.ThumbnailImg" style="background: url(<%=ZLCMS.Business.Util.FileKit.FirstImgPathThumb(ProductData.ThumbnailImg)%>);background-repeat:no-repeat;background-position:center center;background-size:cover"></div>
                <div class="right">
                    <h3  prop="Data.ProductName"><%=ProductData.ProductName%></h3>
                    <p>单价：<span style="color:red">￥<font prop="Data.SalePrice"><%=ProductData.SalePrice%></font></span></p>
                </div>
                <div class="clear"></div>
                </a>
                </div>

                <div class="comment">
                    <div id="star">
                        <span>星级评分：</span>
                        <ul>
                            <li class="on"><a href="javascript:;">1</a></li>
                            <li class="on"><a href="javascript:;">2</a></li>
                            <li class="on"><a href="javascript:;">3</a></li>
                            <li class="on"><a href="javascript:;">4</a></li>
                            <li class="on"><a href="javascript:;">5</a></li>
                        </ul>
                         <p></p>
                        <span></span>
                          
                    </div>
                    <div class="comment_shou">遇到产品质量问题了吗？<a href="ReturnablesList.aspx?no=<%=Request["ono"]%>" data-ajax="false">点击这里申请售后</a>，小V会尽快处理喔~</div>
                    <form id="form1" command='Member.CommentProduct'>
                    <input type="hidden" command-param='Score' value="5" id="score" />
                    <input type="hidden" command-param='ProductNo' value='<%=Request["no"]%>' />
                    <input type="hidden" command-param='OrderNo' value='<%=Request["ono"]%>' />
                    <input type="hidden" command-param='MemberAccount' value="<%=CurrentMemberAccount %>" />
                    <input type="hidden" command-param='ImageList' />
                    <textarea cols="40" rows="8" name="content" id="content" placeholder="与更多人分享你的消费感受。" data-rule="required;" command-param='Content'></textarea>
                    <div class="image_list">
                    </div>
                    <div class="bttn">
                        <a href="javascript:void(0);"  onclick="uploadImage();"><img src="images/addphoto.png"></a>
                    </div>
                    <div class="submitBtn">
                        <a href="javascript:void(0);" onclick="postComment();">提交</a>
                    </div>
                    </form>
                </div>
            </div>
            <div>
                <span for="content" class="msg-box"></span>
            </div>
            <%--<input id="xyzld" type="file" size="20" />--%>
        </div>
        <div data-role="footer" class="footer" data-position="fixed" data-theme="b">
        </div>
    </div>
 <%-- <script type="text/javascript" src="/wap/lib/jquery/ajaxfileupload.js"></script>--%>
    <script src="/wap/lib/common/loaderHandler.js" type="text/javascript"></script>
    <script src="//res.wx.qq.com/open/js/jweixin-1.2.0.js" type="text/javascript"></script>
    <script type="text/javascript">
//        function LoadData() {
//            var handler = $('.pingjia_box1').loaderHandler();
//            handler.initialize({
//                command: 'Pub.LoadProductDetail',
//                parameter: { ProductNo: '<%=Request["no"]%>', MemberAccount: '<%=CurrentMemberAccount %>' }
//            });

//            handler.load();
//        }
        window.onload = function () {

            var oStar = document.getElementById("star");
            var aLi = oStar.getElementsByTagName("li");
            var oUl = oStar.getElementsByTagName("ul")[0];
            var oSpan = oStar.getElementsByTagName("span")[1];
            var oP = oStar.getElementsByTagName("p")[0];
            var i = iScore = iStar = 5;
            var aMsg = ['', '', '', '', ''];

            for (i = 1; i <= aLi.length; i++) {
                aLi[i - 1].index = i;

                //鼠标移过显示分数
                aLi[i - 1].onmouseover = function () {
                    fnPoint(this.index);
                    //浮动层显示
                    oP.style.display = "block";
                    //计算浮动层位置
                    //oP.style.left = oUl.offsetLeft + this.index * this.offsetWidth - 104 + "px";
                    //匹配浮动层文字内容
                    //oP.innerHTML = "<em><b>" + this.index + "</b> 分 </em>"
                };

                //鼠标离开后恢复上次评分
                aLi[i - 1].onmouseout = function () {
                    fnPoint();
                    //关闭浮动层
                    oP.style.display = "none"
                };

                //点击后进行评分处理
                aLi[i - 1].onclick = function () {
                    iStar = this.index; $('#score').val(iStar);
                    oP.style.display = "none";
                    if (iStar <= 3) {
                        $(".comment .comment_shou").show();
                    } else {
                        $(".comment .comment_shou").hide();
                    }

                    //oSpan.innerHTML = "<strong>" + (this.index) + " 分</strong> "
                }
            }

            //评分处理
            function fnPoint(iArg) {
                //分数赋值
                iScore = iArg || iStar;
                for (i = 0; i < aLi.length; i++) aLi[i].className = i < iScore ? "on" : "";
            }

        };
    </script>
    <script type="text/javascript">
        function uploadImage() {
            wx.chooseImage({
                success: function (res) {
                    var localIds = res.localIds;
                    if (localIds) {
                    }
                    wx.uploadImage({
                        localId: localIds[0],
                        isShowProgressTips: 1,
                        success: function (res) {
                            getLocalImg(localIds[0], function (src) {
                                var html = '<div style="float:left" class="image_item" sid="' + res.serverId + '">'
                                + '<img width="80px" src="' + src + '" alt="图片"/>'
                                + '<a href="#" onclick="removeImg(this)">╳</a>'
                                +'</div>';

                                $('.image_list').append(html);
                                alert('上传成功');
                            });
                        }
                    });
                }
            });
        }
        function getLocalImg(localId, callback) {
            var localData = "";
            if (window.__wxjs_is_wkwebview) {
                wx.getLocalImgData({
                    localId: localId, // 图片的localID
                    success: function (resData) {
                        callback && callback(resData.localData);

                    }
                });
            } else {
                callback && callback(localId);
            }
        }
        function removeImg(container) {
            confirmDialog('确认删除？', function () { $(container).parent().remove(); }, function () { })
        }


        function postComment() {
            var svrids = '';
            $('.image_list>div[sid]').each(function () { svrids += $(this).attr('sid') + ','; });
            $('input[command-param=ImageList]').val(svrids);
            if ($('#score').val() && parseInt($('#score').val()) > 0) {
                if (!$('#content').val()) {
                    showTips("与更多人分享您的消费感受吧！");
                    return false;
                }
                executeFormCommonCommand('form1', succeedCallback);
            }
            else {
                showTips("请选择星级评分");
                return false;
            }
        }
        

        function succeedCallback(result, totalCount) {
            showTips('评论成功', 500, function () {
                location.href = 'commentlist.aspx';
            });
        }

        $(document).ready(function () {
           // LoadData();

            $('#form1').openJQMValidator();
          
        });
//        $('[prop=Data\\.ThumbnailImg]').bind('valuechange', function (event, param) {

//            $('[prop=Data\\.ThumbnailImg]').css({ "background": "url(" + firstFilePath(param.value) + ")", 'background-repeat': 'no-repeat', 'background-position': 'center center', 'background-size': 'cover' });

//            $(event.target).triggerHandler('valuechanged', param);
//            return false;
//        })
    </script>
</asp:Content>
